<template>
  <div class="refund">
    <van-nav-bar @click-left="$router.go(-1)" left-arrow title="退款详情"/>
    <div class="refund_container">
      <div class="refund_shop">
        <p class="refund_shop_title">退款商品</p>
        <van-card :desc="refundShopInfo.description" :title="refundShopInfo.name" :thumb="refundShopInfo.imageUrl"/>
      </div>

      <div class="refund_info">
        <p class="refund_info_title">退款信息</p>
        <van-cell-group>
          <van-cell title="货物状态" :value="lable" is-link @click="StatusOfGoods"/>
          <van-cell title="退款金额" :value="refundShopInfo.salePrice" label="不可修改" class="refund_money"/>
        </van-cell-group>
        <van-popup v-model="popupShow" position="bottom" :style="{ height: '40%' }" class="state_popup">
          <van-radio-group v-model="shopState">
            <van-cell-group>
              <van-cell title="已收到货" clickable @click="shopState = '1'">
                <template #right-icon>
                  <van-radio name="1"/>
                </template>
              </van-cell>
              <van-cell title="未收到货" clickable @click="shopState = '2'">
                <template #right-icon>
                  <van-radio name="2"/>
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <van-button type="default" @click="submitShopState" class="submitState" round>确认</van-button>
        </van-popup>
      </div>
      <div class="refund_replenish">
        <p class="refund_replenish_title">补充描述和凭证</p>
        <van-field v-model="replenish" rows="2" type="textarea" maxlength="50" placeholder="请输入相关信息"
                   show-word-limit class="refund_replenish_content"/>
        <van-field name="uploader" class="refund_replenish_image">
          <template #input>
            <van-uploader multiple :max-count="1" v-model="uploaderFiles"/>
          </template>
        </van-field>
      </div>
      <van-button type="primary" block class="submitButton" round :loading="flag" @click="submitRefundOrder">提交
      </van-button>
    </div>
  </div>

</template>

<script>
export default {
  name: "RefundView",
  data() {
    return {
      flag: false,//开启加载动画
      popupShow: false,//弹出框
      replenish: "",
      lable: "请选择",
      uploaderFiles: [],
      shopState: "",
      refundShopInfo: {}
    }
  },
  created() {
    this.getRefundInfo();
  },

  mounted() {
    let htmlDom = document.querySelector(".refund_container");
    let height = document.documentElement.clientHeight || document.body.clientHeight;
    htmlDom.style.height = height - 46 + "px"
  },

  methods: {
    //获取该订单的相关数据
    async getRefundInfo() {
      let res = await this.$axios.post(this.$api.getOrderDetailById, {
        userId: this.$store.getters.user.userId,
        orderId: this.$route.query.orderId
      });
      if (res.status === 200 && res.data.code === 200) {
        this.refundShopInfo = res.data.data;
      }
    },

    //开启状态选择的弹框
    StatusOfGoods() {
      this.popupShow = true;
    },

    //单击货物状态选择实现数据的选择
    submitShopState() {
      //判断数据是否为空
      if (this.shopState === "") {
        this.$toast("请选择货物的状态");
        this.popupShow = false;
      }
      if (this.shopState === "1") {
        this.lable = "已收到货";
        this.popupShow = false;
      }
      if (this.shopState === "2") {
        this.lable = "未收到货";
        this.popupShow = false;
      }
    },

    //实现数据的提交
    async submitRefundOrder() {
      // 开启提交状态
      this.flag = true;

      // 判断部分数据是否为空
      if (this.shopState === "") {
        this.$toast("请选择货物的状态");
        this.flag = false;
      }
      //判断是否上传图片凭证
      if (this.uploaderFiles.length <= 0) {
        this.$toast("请选择一张图片作为退款凭证");
        this.flag = false;
      }

      //构建数据
      let formData = new FormData();
      formData.append("imageUrl", this.uploaderFiles[0].file);
      formData.append("orderId", this.$route.query.orderId);
      formData.append("userId", this.$store.getters.user.userId);
      formData.append("shopState", this.shopState);
      formData.append("replenish", this.replenish);
      formData.append("refundMoney", this.refundShopInfo.salePrice);

      //发送请求
      let res = await this.$axios.post(this.$api.submitRefundOrder, formData);
      this.flag = false;
      if (res.status === 200 && res.data.code === 200) {
        this.$router.go(-1);//回到上一级
        this.$toast(res.data.message);
      }
    }
  }
}
</script>

<style scoped lang="less">
.refund {
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }

  .refund_container {
    padding: .3rem;
    background-color: #fafafa;
    padding-bottom: 15%;

    .refund_shop {
      background-color: #ffffff;
      padding: .3rem;
      border-radius: .3rem;

      .refund_shop_title {
        font-size: 14/16rem;
        padding-left: .2rem;
        margin: 0;
      }

      .van-card {
        background-color: #fff;
      }
    }

    .refund_info {
      background-color: #fff;
      border-radius: .2rem;
      padding: .2rem;
      margin-top: .7rem;

      .refund_info_title {
        margin: 0;
        font-size: 14/16rem;
      }

      .van-cell {
        padding: 10/16rem 5/16rem;
        font-size: 14/16rem;
      }

      .refund_money {
        .van-cell__value {
          padding-right: 1rem;
          color: red;
        }
      }

      .state_popup {
        border-radius: 1rem 1rem 0 0;

        .van-cell {
          padding: 1rem 1rem;
        }

        .submitState {
          width: 90%;
          margin-left: 50%;
          margin-top: 3rem;
          padding: .5rem;
          background-color: #ff4c0a;
          transform: translateX(-50%);
        }
      }
    }


    .refund_replenish {
      background-color: #ffffff;
      border-radius: .2rem;
      margin-top: .5rem;
      padding: .2rem;

      .refund_replenish_content {
        padding: 8/16rem 10/16rem;
        border-radius: .4rem .4rem 0 0;
        background-color: #eee;
        margin-top: .5rem;
      }

      .van-field__word-limit {
        margin-top: 0;
      }

      .refund_replenish_image {
        background-color: #eee;
        padding: 0;

        .van-uploader {
          margin-left: .3rem;
        }
      }

      .refund_replenish_title {
        font-size: 14/16rem;
        margin: 0;

      }
    }

    .submitButton {
      position: fixed;
      bottom: .3rem;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
      background-color: #ff4c0a;
      border: none;
    }
  }
}
</style>